﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>あれいつ作ったっけ？</title>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
	<script type="text/javascript" src="/js/jquery.activity-indicator-1.0.0.js"></script>
	<script type="text/javascript">
	var xhr;
	function cookingSearch() {
		if ($("#query").val() != "") {
			//alert("start");
			if (xhr != null) {
				//alert("abort");
				xhr.abort();
			}
			if (document.getElementById("loading") != null){
				$('#loading').remove();
			}
			$('<div>',{id:'loading'}).appendTo('#main');
			$('#loading').activity();
			$('input[name="monRange"]:checked').focus();
			xhr = $.get("/cookingSearch",{query:$("#query").val(),monRange:$('input[name="monRange"]:checked').val()},
				function(data) {
					//alert("data: " + data);
					var results = JSON.parse(data);
					if (document.getElementById("results") != null){
						$('#results').remove();
					}
					if (document.getElementById("loading") != null){
						$('#loading').remove();
					}
					for (var i in results) {
						//alert("results[" + i + "].url:" + results[i].url);
						//alert("results[" + i + "].title:" + results[i].title);
						//alert("results[" + i + "].text:" + results[i].text);
						$('<div>',{id:'results'}).appendTo('#main');
						$('<ul>',{id:'result'+i,style:'list-style-type:none'}).appendTo('#results');
						$('<li>',{id:'resultT'+i}).appendTo('#result' + i);
						$('<a>',{href:results[i].url,target:'_blank',html:results[i].title}).appendTo('#resultT' + i);
						$('<li>',{id:'resultS'+i,html:results[i].text}).appendTo('#result' + i);
					}
				});
		}
	}
	</script>
	<style type="text/css">
	div.bubble#b1 {
		float: left;
		margin: 30px;
		border-left: 10px solid #ff0080;
		border-bottom: 10px solid transparent;
		-border-bottom-color: white;
	}
	div.bubble#b1 div.body {
		float: left;
		padding: 10px 20px;
		margin: -10px 0 0 -30px;
		border-radius: 10px;
		-moz-border-radius: 10px;
		-webkit-border-radius: 10px;
		background: #ff0080;
		font: bold 25px/1.2 "Gill Sans", "Trebuchet MS", sans-serif;
		text-align: center;
		color: white;
		-position: relative;
	}
	hr.style1 {
		clear: both;
	    border: 0;
	    border-bottom: 1px dashed #ccc;
	    background: #999;
	}
	</style>
</head>
<body>
<div id="main">
	<div class="bubble" id="b1">
		<div class="body">
			<form name="form1" action="javascript:cookingSearch();">
				<!--input value="" title="検索" size="41" type="text" autocomplete="off" id="query" name="query" maxlength="2048" onkeyup="cookingSearch();"/-->
				<input value="" title="検索" size="41" type="text" autocomplete="off" id="query" name="query" maxlength="2048"/>
				<br/>
				<label for="txtS">いつ作ったっけ？</label>
				<br/>
				<label><input type="radio" name="monRange" value="1" onclick="cookingSearch();" checked>1ケ月以内</label>
				<label><input type="radio" name="monRange" value="3" onclick="cookingSearch();">3ケ月以内</label>
				<label><input type="radio" name="monRange" value="6" onclick="cookingSearch();">6ケ月以内</label>
				<br/>
			</form>
		</div>
	</div>
	<hr class="style1">
</div>
</body>
</html>